<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onUnmounted } from 'vue'

import { clear, content, send } from './data'
import { imagePath } from '@/libs/file-utils'

const img_logo = imagePath('user/feedback/logo.png')

onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="user-feedback"
    :pageStyle="{ backgroundColor: '#FEEDFF' }"
  >
    <div class="box">
      <div
        class="logo"
        :style="{ backgroundImage: img_logo }"
      ></div>
      <div class="title">蒜蒜吐槽大会</div>

      <textarea
        class="input"
        maxlength="500"
        placeholder="呼叫蒜宝！产品BUG、新功能脑洞，有料你就说，别烂在肚子里，悄悄告诉本蒜~主打一个听劝~"
        placeholder-style="color: #4A3F57;"
        v-model="content"
      ></textarea>

      <div class="count">{{ content.length }}/200</div>
    </div>
    <div
      class="send"
      @click="send"
    >丢个蒜吐槽一下</div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.box {
  position: relative;
  width: 686rpx;
  height: 720rpx;

  margin: 78rpx auto 0;

  box-sizing: border-box;
  padding: 48rpx;

  border-radius: 64rpx;
  border: 2rpx solid #D9CAE7;

  background-color: #D5B4F8;
  box-shadow: 0 4rpx 13rpx 0 rgba(120, 83, 191, .57);

  .logo {
    position: absolute;
    top: -78rpx;
    right: 18rpx;

    transform-origin: center top;
    transform: scale(.9);

    width: 202rpx;
    height: 236rpx;
  }

  .title {
    color: #5C069E;
    font-size: 48rpx;
    line-height: 58rpx;
  }

  .input {
    width: 100%;
    height: 480rpx;

    margin-top: 36rpx;

    color: #000;
    font-size: 32rpx;
    line-height: 40rpx;
  }

  .count {
    position: absolute;
    bottom: 48rpx;
    right: 48rpx;

    color: #4A3F57;
    font-size: 32rpx;
    line-height: 40rpx;
  }
}

.send {
  width: 622rpx;
  height: 116rpx;

  margin: 54rpx auto;

  border-radius: 32rpx;
  background-color: #D8B4FF;
  box-shadow: 0 4rpx 20rpx 0 rgba(59, 3, 112, .13), 0 -4rpx 4rpx 0 rgba(118, 0, 179, .30) inset, 0 4rpx 4rpx 0 #F8EAFF inset;

  color: #290079;
  text-align: center;
  font-size: 48rpx;
  line-height: 116rpx;
}
</style>